<template>
  <div class="commentary-size">
    <div class="commentary-header">全部评论({{ this.commentCount }})</div>
    <div class="commentary-box">
      <div
        style="display: flex;margin-bottom: 14px;}"
        v-for="(item1, index1) in commentList"
        :key="item1.commentId"
      >
        <div class="commentary-left">
          <img
            :src="item1.commentAvatar"
            class="commentary-photo"
            @click="jumpPage(item1)"
          />
        </div>
        <div class="commentary-right">
          <h6>{{ item1.commentNickname }}</h6>
          <p>
            {{ item1.commentContext }}
          </p>
          <div class="commentary-time">
            {{ item1.createTime | formatDate }}-{{ item1.commentIp }}
          </div>
          <div class="commentary-btn">
            <el-button
              type="text"
              @click="handleReply(item1.commentId, item1.commentNickname)"
              ><i class="el-icon-chat-round"></i><span>回复</span></el-button
            >
            <el-button type="text" @click="changeLikeStatus(index1, -1)"
              ><i :class="['iconfont', item1.like ? 'active-like' : '']"
                >&#xe600;</i
              ><span>{{item1.likeCounts}}</span></el-button
            >
          </div>
          <!-- <div class="commentary-more">
            <i class="el-icon-more"></i>
            <div class="commentary-delete">
              <el-button type="info" size="small">删除评论</el-button>
            </div>
          </div> -->
          <div
            class="reply-commentary"
            v-show="commentaryChild"
            v-for="(item2, index2) in item1.replyComments"
            :key="item2.commentId"
          >
            <div class="commentary-left">
              <img :src="item2.commentAvatar" class="commentary-photo" />
            </div>
            <div class="commentary-right">
              <h6>{{ item2.commentNickname }}</h6>
              <p>
                {{ item2.commentContext }}
              </p>
              <div class="commentary-time">
                {{ item2.createTime | formatDate }}-{{ item2.commentIp }}
              </div>
              <div class="commentary-btn">
                <el-button
                  type="text"
                  @click="handleReply(item2.commentId, item2.commentNickname)"
                  ><i class="el-icon-chat-round"></i
                  ><span>回复</span></el-button
                >
                <el-button type="text" @click="changeLikeStatus(index1, index2)"
                  ><i :class="['iconfont', item2.like ? 'active-like' : '']"
                    >&#xe600;</i
                  ><span>{{item2.likeCounts}}</span></el-button
                >
              </div>
              <!-- <div class="commentary-more">
                <i class="el-icon-more"></i>
                <div class="commentary-delete">
                  <el-button type="info" size="small">删除评论</el-button>
                </div>
              </div> -->
            </div>
          </div>
        </div>
      </div>
      <div class="other-commentary">
        <span class="commentary-boundary"></span>
        <div v-if="isCommentary" @click="openCommentary()" class="expanded">
          <el-button type="text"></el-button>展开4条回复<i
            class="el-icon-arrow-down"
          ></i>
        </div>
        <div v-else @click="openCommentary()" class="closed">
          <el-button type="text"></el-button>收起回复<i
            class="el-icon-arrow-up"
          ></i>
        </div>
      </div>
    </div>
    <div class="commentary-footer">
      <el-input
        ref="commentInput"
        :placeholder="commentPlaceHolder"
        suffix-icon="el-icon-position"
        v-model="commentContent"
        @blur="handleCommentBlur"
      >
      </el-input>
    </div>
  </div>
</template>

<script>
import { formatDate } from "@/utils/date";
import { getCommentListApi } from "@/api/commentManagement";
export default {
  data() {
    return {
      like: true,
      commentContent: "",
      commentaryChild: false,
      isCommentary: true,
      commentPlaceHolder: "留下你的精彩评论吧",
      commentList: [],
      userInfo: this.$store.state.userInfo,
    };
  },
  props: ["worksId", "commentCount"],
  created() {
    this.getCommentListFun();
  },
  filters: {
    formatDate(time) {
      if (time == null || time === "") {
        return "N/A";
      }
      let date = new Date(time);
      return formatDate(date, "yyyy年MM月dd日 hh:mm");
    },
  },
  methods: {
    jumpPage(item1) {
      this.$router.push(user);
    },
    getCommentListFun() {
      getCommentListApi({
        worksId: this.worksId,
        page: 1,
        userId: this.userInfo.userId,
      }).then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          this.commentList = res.data.data;
        }
      });
    },
    handleReply(parentId, parentName) {
      this.commentPlaceHolder = "@" + parentName;
      this.$refs.commentInput.focus();
    },
    handleCommentBlur() {
      this.commentPlaceHolder = "留下你的精彩评论吧";
    },
    changeLikeStatus(idx1, idx2) {
      if (idx2 == -1) {
        // 一级评论
        this.commentList[idx1].likeCounts += this.commentList[idx1].like ? -1 : 1
        this.commentList[idx1].like = !this.commentList[idx1].like;
      } else {
        this.commentList[idx1].replyComments[idx2].likeCounts += this.commentList[idx1].replyComments[idx2].like ? -1 : 1
        this.commentList[idx1].replyComments[idx2].like =
          !this.commentList[idx1].replyComments[idx2].like;
      }
    },
    openCommentary() {
      this.isCommentary = !this.isCommentary;
      this.commentaryChild = !this.commentaryChild;
    },
  },
};
</script>

<style>
.commentary-header {
  height: 30px;
  font-size: 15px;
  margin: 10px 0 0 10px;
}
.commentary-box {
  /* height: 520px; */
  padding: 5px 8px;
  width: 100%;
  box-sizing: border-box;
  /* overflow-y: scroll; */
  position: absolute;
  top: 40px;
  bottom: 55px;
  overflow-y: auto;
}
/* 隐藏 Chrome、Safari 和 Opera 的滚动条 */
.commentary-box::-webkit-scrollbar {
  display: none;
}

/* 隐藏 IE、Edge 和 Firefox 的滚动条 */
.commentary-box {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
.commentary-photo {
  width: 35px;
  height: 35px;
  border-radius: 90px;
}
.commentary-right {
  margin-left: 10px;
  position: relative;
  width: 86%;
}
.commentary-right h6 {
  color: #a9a9a9;
  font-size: 14px;
  font-weight: normal;
}
.commentary-right h6:hover {
  color: #ff2c55;
}
.commentary-right p {
  font-size: 14px;
  margin: 6px 0;
  color: #fff;
  overflow: hidden;
  line-height: 1.5;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}
.commentary-time {
  font-size: 12px;
  color: #929292;
}
.commentary-btn {
  color: #ababab;
  font-size: 12px;
  margin-top: 8px;
}
.commentary-btn .el-button {
  padding: 0;
  color: #929292;
}
.commentary-btn .el-button:hover {
  color: #fff;
}
.commentary-btn .el-button span span {
  margin-left: 5px;
}
.commentary-more {
  position: absolute;
  top: 0;
  text-align: right;
  right: 0;
  display: none;
}
.commentary-more i {
  color: #929292;
}
.commentary-more i:hover {
  color: #fff;
}
.commentary-right:hover .commentary-more {
  display: block;
}
.commentary-delete {
  position: absolute;
  top: 16px;
  right: 0;
  /* display: none; */
}
.commentary-more:hover .commentary-delete {
  display: block;
}
.commentary-delete .el-button--info {
  border: none;
  background-color: #252632;
  /* border-color: #909399; */
}
.commentary-footer {
  width: 100%;
  box-sizing: border-box;
  padding: 0 10px 3px 10px;
  background: #3a393e;
  position: absolute;
  bottom: 0;
}
.commentary-footer .el-input__inner {
  background-color: #66635e;
  color: white;
  border: none;
}
.reply-commentary {
  display: flex;
  margin-top: 14px;
}
.other-commentary {
  display: flex;
  margin-left: 40px;
  align-items: center;
  margin-top: 25px;
  cursor: pointer;
  font-size: 12px;
}
.commentary-boundary {
  width: 32px;
  height: 1px;
  display: inline-block;
  margin-right: 4px;
  background: rgb(249 249 249 / 6%);
}
.commentary-size {
  height: 100%;
}
.active-like {
  color: red;
}
</style>
